/**
 * Theme.
 *
 * Compose the theme by adding colors.
 *
 *
 * Style guide dependencies.theme
 */
body {
    background-color: $color-black;
    color: $color-white;
}
/**
 * Form theme
 *
 * Style guide dependencies.theme.form
 */
.form {
    /**
     * Form label theme
     *
     * Markup: theme_form_label.hbs
     *
     * Style guide dependencies.theme.form.label
     */
    &-label {
        &--name {
            background-color: $color-tabname;
            color: $color-white;
        }
        &--twitch {
            background-color: $color-twitch;
            color: $color-white;
        }
        &--kageshi {
            background-color: $color-kageshi;
            color: $color-black;
        }
        &--youtube {
            background-color: $color-youtube;
            color: $color-white;
        }
        &--facebook {
            background-color: $color-facebook;
            color: $color-white;
        }
        &--twitter {
            background-color: $color-twitter;
            color: $color-white;
        }
        &--discord {
            line-height: 6rem;
            background-color: $color-discord;
            color: $color-white;
        }
    }

    /**
     * Form input theme
     *
     * Markup: theme_form_input.hbs
     *
     * Style guide dependencies.theme.form.input
     */
    &-input {
        width: 100%;
        background-color: $background-input;
        color: $color-input;
        border-bottom: .5rem solid transparent;
        &--tabname {
            &:focus {
                border-bottom: .5rem solid $color-tabname;
            }
        }
        &--twitch {
            &:focus {
                border-bottom: .5rem solid $color-twitch;
            }
        }
        &--kageshi {
            &:focus {
                border-bottom: .5rem solid $color-kageshi;
            }
        }
        &--youtube {
            &:focus {
                border-bottom: .5rem solid $color-youtube;
            }
        }
        &--facebook {
            &:focus {
                border-bottom: .5rem solid $color-facebook;
            }
        }
        &--twitter {
            &:focus {
                border-bottom: .5rem solid $color-twitter;
            }
        }
    }

    /**
     * Form submit theme
     *
     * Markup: theme_form_submit.hbs
     *
     * Style guide dependencies.theme.form.submit
     */
    &-submit {
        background-color: $color-action--add;
        border: 1px solid $color-action--add;
        color: $color-white;
    }

    /**
     * Form cancel theme
     *
     * Markup: theme_form_cancel.hbs
     *
     * Style guide dependencies.theme.form.cancel
     */
    &-cancel {
        background-color: $color-action--cancel;
        border: 1px solid $color-action--cancel;
        color: $color-white;
    }

    /**
     * Form error theme
     *
     * Markup: theme_form_error.hbs
     *
     * Style guide dependencies.theme.form.error
     */
    &-error {
        padding: 1em;
        background-color: $color-status--error;
    }

    /**
     * Form unfolded
     *
     *
     * Style guide dedendencies.them.form.unfolded
     */
    &-unfolded {
        background: $background-content;
        border: 1px solid $color-border;
        height: 56vh;
        padding: 1rem;
        position: absolute;
        z-index: 2;
        right: 1px;
        top: 8vh;
        transition: width 0.4s ease-in;
        width: 30rem;
    }
}

/**
 * Link theme
 *
 * Style guide dependencies.theme.link
 */
.link {
    /**
     * Link to trigger fold
     *
     * Markup: theme_link_fold.hbs
     *
     * Style guide dependencies.theme.link.fold
     */
    &-fold {
        background-color: $color-action--add !important;
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        color: $color-white;
        margin-left: auto;
        padding: 1rem;
        text-decoration: none;
        &--hover {
            color: $color-white;
        }
    }

    /**
     * Link to trigger unfold
     *
     * Markup: theme_link_unfold.hbs
     *
     * Style guide dependencies.theme.link.unfold
     */
    &-unfold {
        align-items: center;
        background-color: $color-action--cancel !important;
        border-top-left-radius: .5em;
        border-bottom-left-radius: .5em;
        color: $color-white;
        display: flex;
        height: 4vh;
        justify-content: space-around;
        margin-left: auto;
        text-decoration: none;
        text-decoration: none;
        width: 100%;
        &--hover {
            color: $color-white;
        }
    }
}

/**
 * Tab theme
 *
 * Style guide dependencies.theme.tab
 */
.tab {
    background-color: $background-tab;

    /**
     * Tab theme default link
     *
     * Markup: theme_tab_link.hbs
     *
     * Style guide dependencies.theme.tab.link
     */
    &-link {
        background-color: $background-tab--item;
        color: $color-tab--item;
        &:hover {
            background-color: $color-status--active;
            color: $color-tab--item;
            text-decoration: none;
        }
    }

    /**
     *  Tab when grouped
     *
     * Markup: theme_tab_grouped.hbs
     *
     * Style guide dependencies.them.tab.grouped
     */
    &-item {
      &--grouped {
        width: 3rem;
        color: transparent;
        border: 1px solid $background-tab--active;
        background-color: $background-tab--grouped;
      }
    }

    /**
     * Tab theme active link
     *
     * Markup: theme_tab_active.hbs
     *
     * Style guide dependencies.theme.tab.active
     */
    &-active {
        background-color: $background-tab--active;
        color: $color-status--active;
        &:hover {
            text-decoration: none;
            color: $color-status--active;
        }
    }
}

.social {
    &-item {
        color: $color-white;

        &--facebook {
            background: $color-facebook;
        }

        &--youtube {
            background: $color-youtube;
        }

        &--twitter {
            background: $color-twitter;
        }

        &--discord {
            background: $color-discord;
        }
    }
}
.empty {
    &-button {
        background-color: rgb(17, 17, 17);
        background-image: linear-gradient(to bottom,
                                          rgb(19, 19, 19),
                                          rgb(17, 17, 17));
        background-position: center center;
        background-repeat: no-repeat;
        border: 0.3rem dashed rgb(23, 22, 22);
        border-radius: 50%;
        opacity: 0.4;
        &--icon {
            align-items: center;
            color: rgb(33, 33, 33);
            display: flex;
            font-size: 10vh;
            height: 100%;
            justify-content: center;
            width: 100%;
        }
    }

}
